<template>
  <div class="detail" v-if="showPage">
    <div class="section tc">
      <video id="myVideo" :show-progress="false" :src="picPre + data.video" :autoplay="true" @ended="endVideo" @play="play"></video>
      <div class="content">
        <h2>{{data.title}}</h2>
        <span><span class="iconfont iconbofangkaobei"></span>{{data.play_num}}播放</span>
        <span>发布时间：{{data.created_at}}</span>
        <h3>视频简介：</h3>
        <p>{{data.describe}}</p>
      </div>
    </div>
    <h1 ﻿@tap="goPage('/movie/comment?type=movie&id='+id)"><span>用户发帖（{{Posts.total_count}})</span><span class="all" > 全部 <span class="iconfont iconquanbu"></span></span></h1>
    <div class="empty" v-if="Posts.total_count === 0">暂无发帖，快来发表第一条～</div>
    <comment v-else @refresh="refresh" :Posts="Posts.data"></comment>
    <img class="edit" ﻿@tap="toEdit()"  mode="widthFix" src="/static/img/edit.png" alt="">
  </div>
</template>

<script>
  import comment from '@/components/comment/index';
  import { mapState } from 'vuex'
  export default {
    mpType: 'page',
    components: {
      comment
    },
    data() {
      let that = this;
      return {
        picPre: that.$api.picPre,
        id: "",
        Posts:{},
        data:{},
        loadingEnd:{
          moduleOne: false,
          moduleTwo: false
        },
        showPage: true,
        src:"http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400",

      }
    },
    methods:{
      goPage(url){
        uni.navigateTo({
        	url: url
        })
      },
      toEdit(){
        if(!this.isLogin){
          let that = this;
          uni.showModal({
            title: '亲，您尚未登录',
            content: '前去登录吧~',
            success (res) {
              if (res.confirm) {
                ﻿uni.navigateTo({ 				  	
					url:'/person/login' 				  ,
					})
              }
            }
          });
        }else {
			uni.navigateTo({
				url: '/movie/edit?id='+ this.id
			})
        }
      },
      search(){},
      endVideo(e){
		this.$ajax
		  .post(this.$api.watchVideo)
		  .then(res => {
			if(res.is_watch === 1){
				uni.showToast({
				  title: '观看视频任务完成，恭喜您获得'+res.int+'积分',
				  icon: 'none',
				  duration: 2000
				})
			}
		  })
		  .catch(err => {
		    uni.showToast({
		      title: err,
		      icon: 'none',
		      duration: 2000
		    })
		  });
      },
      play(e){
        console.log("视频开始",e)
      },
      getMovieDetail(){
        this.$ajax
          .post(this.$api.movieDetail,{id:this.id})
          .then(res => {
            this.data = res;
            this.loadingEnd.moduleOne = true;
          })
          .catch(err => {
            this.loadingEnd.moduleOne = true;
            uni.showToast({
              title: err,
              icon: 'none',
              duration: 2000
            })
          });
      },
      getPostsList(){
        this.$ajax
          .post(this.$api.postsList,{movie_id:this.id,page_size:3})
          .then(res => {
            this.Posts = res;
            this.loadingEnd.moduleTwo = true;
          })
          .catch(err => {
            this.loadingEnd.moduleTwo = true;
            uni.showToast({
              title: err,
              icon: 'none',
              duration: 2000
            })
          });
      },
      refresh(){
        this.getPostsList();
      },
      viewLoad(){
        this.loadingEnd = {
          moduleOne: false,
          moduleTwo: false
        };
        uni.showLoading({
          title: '加载中',
          mask: true
        });
        this.getMovieDetail();
        this.getPostsList();
      },
    },
	onShareAppMessage(res){
	  ﻿this.$common.share()
	},
    onLoad(res){
      uni.showShareMenu({
        withShareTicket: true
      })
      this.id = res.id;
    },
    onHide(){
      this.showPage= false;
    },
    onShow(){
      this.showPage= true;
      this.viewLoad();
    },
    computed:{
      ...mapState([
        'isLogin'
      ]),
      hideLoading(){
        if(this.loadingEnd.moduleOne && this.loadingEnd.moduleTwo ){
          setTimeout(function(){
            uni.hideLoading()
            }, 800)
        }
      }
    }
  }
</script>

<style scoped>
  .detail{
    padding: 40rpx 30rpx 0 30rpx;
    font-size: 0;
  }
  .edit{
    position: fixed;
    top: 600rpx;
    right: 0;
    width: 100rpx;
    height: 100rpx;
  }
  .section{
    background:rgba(250,250,250,1);
    border:1px solid rgba(238,238,238,1);
    border-radius:20px;
  }
  .content{
    padding: 30rpx 10rpx;
  }
  .content h2{
    font-size:28rpx;
    font-family:PingFang SC;
    font-weight:bold;
    color:rgba(50,50,50,1);
    line-height:36rpx;
    margin-bottom: 22rpx;
  }
  .content span{
    font-size:20rpx;
    font-family:PingFang SC;
    font-weight:bold;
    color:rgba(150,150,150,1);
    line-height:30rpx;
    margin-right: 28rpx
  }
  .content h3{
    font-size:26rpx;
    font-family:PingFang SC;
    font-weight:bold;
    color:rgba(50,50,50,1);
    line-height:30rpx;
    margin-top: 58rpx;
    margin-bottom: 19rpx;
  }
  .content p{
    font-size:24rpx;
    font-family:PingFang SC;
    font-weight:bold;
    color:rgba(50,50,50,1);
    line-height:30rpx;
    text-indent:2em;
  }
  .content .iconfont{
    color: #EF5A56;
    margin-right: 8rpx;
    font-size: 24rpx;
  }
  video{
    width: 100%;
}
  h1{
    display: -webkit-box;  /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */
    display: -moz-box;     /* 老版本语法: Firefox (buggy) */
    display: -ms-flexbox;  /* 混合版本语法: IE 10 */
    display: -webkit-flex; /* 新版本语法: Chrome 21+ */
    display: flex;         /* 新版本语法: Opera 12.1, Firefox 22+ */
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    font-size:28rpx;
    font-family:PingFang SC;
    font-weight:bold;
    color: #FFFFFF;
    line-height:30rpx;
    background:rgba(239,90,86,1);
    padding: 13rpx 20rpx;
    border-radius:20rpx 20rpx 4rpx 4rpx;
    margin-top: 40rpx;
  }
  .iconquanbu{
    color: #FFFFFF;
    font-size: 22rpx;
    margin-right: 7rpx;
  }
  .all{
    font-size: 22rpx;
  }
  .empty{
    color: #a09da0;
    font-size: 30rpx;
    line-height: 130rpx;
    text-align: center;
  }
</style>
